<!-- 设置费用明细 -->
<template>
  <div class="import-details-dialog">
    <el-dialog width="800px" class top="6vh" title="设置费用明细" :visible="myVisible" @close="close" v-loading="loadingViewAll"
      element-loading-target="document.getElementById('onelyLodningView')"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
      <div class="dialog-footer">
        <el-button type="primary" size="mini" @click="previousOrder()">上一单</el-button>
        <el-button type="primary" size="mini" @click="nextOrder">下一单</el-button>
        <el-button type="success" @click="printViewClick" size="mini" >打 印</el-button>
        <el-button type="info" @click="close" size="mini">关 闭</el-button>
        <el-button type="success" @click="addFee" size="mini" >保 存</el-button>
      </div>
      <el-form :model="importModForm" label-width="100px" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用箱人：">
              <el-select v-model="importModForm.customerId" @change="customerChange" filterable placeholder="请选择">
                <el-option v-for="item in kehuOptions" :key="item.UserId" :label="item.search" :value="item.UserId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="船名：" style="width: 293px;">
              <el-autocomplete
                  v-model="importModForm.boat"
                  :fetch-suggestions="shipSearch"
                  @select="chuanmingChange"
                  placeholder="请输入船名"
                >
                  <template slot-scope="{ item }">
                    <div>{{ item.value = item.sbv }}</div>
                  </template>
                </el-autocomplete>
                <el-tooltip class="item" effect="dark" content="如未找到所需船名/航次，请点击此按钮" placement="top">
                  <el-button
                    type="primary"
                    @click="getBoatIofnJH"
                    icon="el-icon-refresh"
                    circle
                  ></el-button>
                </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="航次：">
              <el-input v-model="importModForm.voyage" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
              <el-form-item label="船代：">
                <el-select v-model="importModForm.shipAgencyName" @change="shipAgencyNameChange" clearable filterable placeholder="船代选择">
                <el-option
                  v-for="item in shipAgencyNameOptions"
                  :key="item.zjm"
                  :label="item.zjm"
                  :value="item.shipAgencyName"
                ></el-option>
              </el-select>
              </el-form-item>
            </el-col>
          <el-col :span="8">
            <el-form-item label="船公司：">
                <el-select v-model="importModForm.company" @change="companyChange" clearable filterable placeholder="船公司选择">
                  <el-option
                    v-for="item in chuangongshiOptions"
                    :key="item.nameCncode"
                    :label="item.nameCncode"
                    :value="item.nameCn"
                  ></el-option>
                </el-select>
                <!-- <el-input style="width: 170px; height: 28px; line-height: 28px; color: #409eff;" :disabled="true" v-model="importModForm.company"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交单码：">
              <el-input filterable v-model="importModForm.pCode" placeholder="请输入交单码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提单号：">
              <el-input v-model="importModForm.blno"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="到港时间：">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                class="timeStyle"
                v-model="importModForm.timeArrival"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送箱点：">
              <el-select @change="yardChange" size="mini" v-model="importModForm.yard" filterable placeholder="请输入送箱点">
                <el-option
                  v-for="item in yardOptions"
                  :key="item.nameCode"
                  :label="item.nameCode"
                  :value="item.yardName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="业务员手机">
              <el-input disabled="disabled" value="后台读取"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="港区：">
              <el-input v-model="importModForm.port" ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="制单码：">
              <el-input filterable v-model="importModForm.voucherCode" placeholder="请输入制单码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="对单时间：">
              <el-date-picker class="timeStyle" value-format="yyyy-MM-dd HH:mm" v-model="importModForm.updateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请时间：">
              <el-date-picker class="timeStyle" value-format="yyyy-MM-dd HH:mm" v-model="importModForm.applyTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作员">
              <!-- <el-input v-model="importModForm.salesmanId"></el-input> -->
              <el-select v-model="importModForm.salesmanName" @change="salemanChange" filterable clearable placeholder="操作员选择">
              <el-option
                v-for="item in putBoxNameOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="放箱员：">
              <el-select v-model="importModForm.putBoxPartId" filterable clearable placeholder="放箱员选择">
              <el-option
                v-for="item in putBoxPartOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="放箱备注：">
              <el-input type="textarea" v-model="importModForm.putBoxNote"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结账时间：">
              <el-date-picker class="timeStyle" value-format="yyyy-MM-dd HH:mm:ss" v-model="importModForm.checkOutTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="退款金额：">
              <el-input filterable v-model="importModForm.refundMoney" @focus="emptyMon()" @blur="romoveMon()" placeholder="请输入退款金额"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款时间：">
              <el-date-picker class="timeStyle" value-format="yyyy-MM-dd HH:mm:ss" v-model="importModForm.refundDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin: 5px 0 5px 0">
        <el-button @click="newBoxModel" type="primary" size="small">新建箱型</el-button>
      </el-row>
      <el-table border :data="importModForm.boxList" style="width: 100%">
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column label="箱型" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" placeholder="请选择">
              <el-option label="20GP" value="20GP"></el-option>
              <el-option label="40GP" value="40GP"></el-option>
              <el-option label="40HC" value="40HC"></el-option>
              <el-option label="20FR" value="20FR"></el-option>
              <el-option label="20FQ" value="20FQ"></el-option>
              <el-option label="20HT" value="20HT"></el-option>
              <el-option label="20OT" value="20OT"></el-option>
              <el-option label="20OH" value="20OH"></el-option>
              <el-option label="20RF" value="20RF"></el-option>
              <el-option label="20RH" value="20RH"></el-option>
              <el-option label="20TK" value="20TK"></el-option>
              <el-option label="20GH" value="20GH"></el-option>
              <el-option label="20PF" value="20PF"></el-option>
              <el-option label="20HQ" value="20HQ"></el-option>
              <el-option label="40FR" value="40FR"></el-option>
              <el-option label="40FQ" value="40FQ"></el-option>
              <el-option label="40HT" value="40HT"></el-option>
              <el-option label="40HCHT" value="40HCHT"></el-option>
              <el-option label="40GPHT" value="40GPHT"></el-option>
              <el-option label="40OT" value="40OT"></el-option>
              <el-option label="40OH" value="40OH"></el-option>
              <el-option label="40RF" value="40RF"></el-option>
              <el-option label="40TK" value="40TK"></el-option>
              <el-option label="40RH" value="40RH"></el-option>
              <el-option label="40PF" value="40PF"></el-option>
              <el-option label="40HQ" value="40HQ"></el-option>
              <el-option label="45FR" value="45FR"></el-option>
              <el-option label="45GP" value="45GP"></el-option>
              <el-option label="45HC" value="45HC"></el-option>
              <el-option label="45HT" value="45HT"></el-option>
              <el-option label="45OT" value="45OT"></el-option>
              <el-option label="45RF" value="45RF"></el-option>
              <el-option label="45RH" value="45RH"></el-option>
              <el-option label="45TK" value="45TK"></el-option>
              <el-option label="45PF" value="45PF"></el-option>
              <el-option label="45HQ" value="45HQ"></el-option>
              <el-option label="53HC" value="53HC"></el-option>
              <el-option label="20HC" value="20HC"></el-option>
              <el-option label="10GP" value="10GP"></el-option>
              <el-option label="40HCFR" value="40HCFR"></el-option>
              <el-option label="40HCOT" value="40HCOT"></el-option>
              <el-option label="45HCOT" value="45HCOT"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.boxnum" :min="1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteModel(scope.$index)" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin: 5px 0 0 0">
        <h3>费用</h3>
      </el-row>
        <el-form :inline="true" label-width="100px" size="mini">
          <el-row>
            <el-col :span="24">
              <el-form-item v-for="(item, index) in importModForm.feedata " :key="index" :label="item.feeName">
                  <el-input @blur="addMoenyYS(item)" :disabled="item.isLock === 1" class="moenyInputS" v-model="item.money"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin: 5px 0 0 0">
          <h3>船代费用</h3>
        </el-row>
        <el-form :inline="true" label-width="100px" size="mini">
          <el-form-item v-for="(item, index) in importModForm.shipFee " :key="index" :label="item.feeName">
              <el-input @blur="addMoenyYF(item)" :disabled="item.isLock === 1" class="moenyInputS" v-model="item.money"></el-input>
          </el-form-item>
        </el-form>
      </el-form>

    </el-dialog>
    <print-reimbursement-dialog :visible="printView" :table-index-data="printData" @visibleChange="printViewVisibleChange"></print-reimbursement-dialog>
  </div>
</template>

<script>
import {
  // GetputBoxFee,
  updateImportPutBox,
  boatNameList,
  getBoatInfo,
  getShipAgencyList,
  shipAgencyPutpartId,
  boatCompanyList,
  yardList,
  getSalesman,
  SearchUserInfo,
  getJKXBoatInfo
} from '../api/importPutBox'
import printReimbursementDialog from './printReimbursementDialog.vue'
export default {
  components: {
    printReimbursementDialog
  },
  data () {
    return {
      myVisible: this.visible,
      printView: false,
      loadingViewAll: false,
      chuanmingOptions: [],
      shipAgencyNameOptions: [],
      chuangongshiOptions: [],
      yardOptions: [],
      putBoxNameOptions: [],
      putBoxPartOptions: [],
      printData: {},
      mysindex: 0,
      importModForm: {
        blno: '',
        boat: '',
        voyage: '',
        shipAgencyName: '',
        company: '',
        port: '',
        salesmanId: '',
        salesmanName: '',
        timeArrival: '',
        yard: '',
        pCode: '',
        customerId: '',
        voucherCode: '',
        putBoxNote: '',
        updateTime: '',
        applyTime: '',
        checkOutTime: '',
        refundDate: '',
        putBoxPartId: '',
        refundMoney: '',
        boxList: [],
        feedata: [],
        shipFee: [],
        oldList: []
      },
      kehuOptions: []
    }
  },
  props: {
    visible: {
      tpye: Boolean,
      default: false
    },
    tableIndexData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    userCodelist: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    visible (value) {
      this.myVisible = value
      // console.log(this.tableIndexData, 'obj1')
      this.mysindex = Number(this.tableIndexData.row2)
      this.bodyViewListen()
      // this.importModForm.feedata = this.printData.importModForm.feedata
      // this.importModForm.shipFee = this.printData.shipFee
    },
    myVisible (value) {
      this.$emit('visibleChange', value)
    }
  },
  methods: {
    async getBoatIofnJH () {
      if (this.importModForm.boat === '') {
        this.$message({
          message: '请输入船名',
          type: 'warning',
          duration: 1500
          })
      } else {
        this.loadingViewAll = true
        let res = await getJKXBoatInfo({
          boatName: this.importModForm.boat
        })
        if (res.status === 200) {
           this.chuanmingOptions = res.data
           this.loadingViewAll = false
        } else {
          this.loadingViewAll = false
          this.$message({
            message: res.msg,
            type: 'warning',
            duration: 1500
          })
        }
      }
    },
    bodyViewListen () {
      this.getBoat()
      this.getShipName()
      this.getBoatCom()
      this.getKehu()
      this.getPutBoxPartList()
      this.getPutBoxPartTList()
      this.getYard()
      this.printData = JSON.parse(JSON.stringify(this.tableIndexData))
      this.importModForm = this.printData
      this.importModForm.oldList = JSON.parse(JSON.stringify(this.tableIndexData.boxList))
    },
    previousOrder () {
      this.importModForm = []
      if (this.mysindex === 1) {
        this.$message({
          title: '提示',
          message: '已到首单',
          type: 'warning'
        })
        this.mysindex = 1
        this.tableIndexData = this.userCodelist[0]
        this.bodyViewListen()
        return false
      }
      this.mysindex--
      this.tableIndexData = this.userCodelist[this.mysindex - 1]
      this.bodyViewListen()
    },
    emptyMon () {
      if (this.importModForm.refundMoney === 0) {
        this.importModForm.refundMoney = ''
      }
    },
    romoveMon () {
      this.importModForm.feedata.map((item, index, arr) => {
        if (item.feeName === '超期费') {
          item.money = item.money - this.importModForm.refundMoney
        }
      })
      this.importModForm.shipFee.map((item, index, arr) => {
        if (item.feeName === '超期费') {
          item.money = item.money - this.importModForm.refundMoney
        }
      })
    },
    // 下一单
    nextOrder () {
      this.importModForm = []
      var lg = this.userCodelist.length
      if (this.mysindex === lg) {
        this.$message({
          title: '提示',
          message: '已到尾单',
          type: 'warning'
        })
        this.tableIndexData = this.userCodelist[lg - 1]
        this.bodyViewListen()
        return false
      }
      this.mysindex++
      this.tableIndexData = this.userCodelist[this.mysindex - 1]
      this.bodyViewListen()
    },
    customerChange (val) {
      this.importModForm.customerId = val
      this.kehuOptions.map((item, index, arr) => {
        if (val === item.UserId) {
          // this.importModForm.salesmanId = item.salesmanId
          this.importModForm.salesmanId = item.salesmanId
        }
      })
    },
    async getKehu () {
      let res = await SearchUserInfo({
        num: 1000000,
        page: 1
      })
      this.kehuOptions = res.data
    },
    // 获取放箱员信息
    async getPutBoxPartTList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 9,
        state: 1
      }
      )
      this.putBoxPartOptions = res.data
    },
    async getPutBoxPartList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 8,
        state: 1
      }
      )
      this.putBoxNameOptions = res.data
    },
    // 新建箱型
    newBoxModel () {
      this.importModForm.boxList.push({type: '', boxnum: 1})
    },
    // 删除箱型
    deleteModel (index) {
      this.importModForm.boxList.splice(index, 1)
    },
    async getYard () {
      let res = await yardList({
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      })
      this.yardOptions = res.data
      console.log(this.yardOptions, '55889')
    },
    salemanChange (val) {
      this.importModForm.salesmanId = val
      // this.putBoxNameOptions.map((item, index, arr) => {
      //   if (val === item.fullName) {
      //     this.importModForm.salesmanId = item.salesmanId
      //   }
      // })
    },
    yardChange (val) {
      this.importModForm.yard = val
      this.yardOptions.map((item, index, arr) => {
        if (val === item.yardName) {
          this.importModForm.yardId = item.yardId
        }
      })
    },
    // 获取船公司
    async getBoatCom () {
      let res = await boatCompanyList({
        nameCncode: ''
      })
      this.chuangongshiOptions = res.data
    },
    // 获取船代
    async getShipName () {
      let res = await getShipAgencyList()
      this.shipAgencyNameOptions = res.data
    },
    // 船代改变事件
    async shipAgencyNameChange (a) {
      this.shipAgencyNameOptions.map((item, index, arr) => {
        if (a === item.shipAgencyName) {
          this.importModForm.shipAgencyId = item.shipAgencyId
          this.importModForm.putBoxPartId = item.putBoxPartId
        }
      })
    },
    async getBoat () {
      let res = await boatNameList({
        content: ''
      })
      this.chuanmingOptions = res.data
    },
    companyChange (a) {
      this.chuangongshiOptions.map((item, index, arr) => {
        if (a === item.nameCn) {
          this.importModForm.boatAgentId = item.boatComId
        }
      })
    },
    chuanmingChange (val) {
      this.importModForm.boat = val.shipName
      this.importModForm.voyage = val.voyage
      this.importModForm.port = val.berthName
      // this.importModForm.openTime = res.data[0].openPortTime
      // this.importModForm.endTime = res.data[0].closePortTime
    },
    async shipSearch (queryString, cb) {
      let res = await boatNameList({
        content: queryString
      })
      let {data, status} = res.data
        let restaurants = res.data
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
            cb(restaurants)
        }, 50 * Math.random())
      // var restaurants = this.chuanmingOptions
      // var results = queryString
      //   ? restaurants.filter(this.createFilter(queryString))
      //   : restaurants
      // cb(results)
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    printViewClick () {
      // this.printData = JSON.parse(JSON.stringify(this.tableIndexData))
      this.printView = true
    },
    addMoenyYS (row) {
      if (row.feeName === '港杂费') {
        this.importModForm.shipFee.map((item, index, arr) => {
          if (item.feeName === '港杂费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '港建费') {
        this.importModForm.shipFee.map((item, index, arr) => {
          if (item.feeName === '港建费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '超期费') {
        this.importModForm.shipFee.map((item, index, arr) => {
          if (item.feeName === '超期费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '坏污箱费') {
        this.importModForm.shipFee.map((item, index, arr) => {
          if (item.feeName === '坏污箱费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '滞纳金') {
        this.importModForm.shipFee.map((item, index, arr) => {
          if (item.feeName === '滞纳金') {
            item.money = row.money
          }
        })
      }
    },
    addMoenyYF (row) {
      if (row.feeName === '港杂费') {
        this.importModForm.feedata.map((item, index, arr) => {
          if (item.feeName === '港杂费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '港建费') {
        this.importModForm.feedata.map((item, index, arr) => {
          if (item.feeName === '港建费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '超期费') {
        this.importModForm.feedata.map((item, index, arr) => {
          if (item.feeName === '超期费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '坏污箱费') {
        this.importModForm.feedata.map((item, index, arr) => {
          if (item.feeName === '坏污箱费') {
            item.money = row.money
          }
        })
      }
      if (row.feeName === '滞纳金') {
        this.importModForm.feedata.map((item, index, arr) => {
          if (item.feeName === '滞纳金') {
            item.money = row.money
          }
        })
      }
    },
    // async getFee () {
    //   let res = await GetputBoxFee({
    //     putBoxId: this.tableIndexData.putBoxId
    //   })
    //   this.importModForm.feedata  = res.data
    // },
    async addFee () {
      this.loadingViewAll = true
      let res = await updateImportPutBox(this.importModForm)
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.loadingViewAll = false
        this.importModForm.oldList = JSON.parse(JSON.stringify(this.importModForm.boxList))
        this.$emit('getTableData')
      } else {
        this.loadingViewAll = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    close () {
      this.myVisible = false
    },
    printViewVisibleChange (value) {
      this.printView = value
    }
  }
}
</script>
<style lang="less">
.el-autocomplete-suggestion {
    width: auto !important;
}
 .import-details-dialog {
   .el-dialog__body {
      padding: 5px 20px;
    }
   .el-input__inner {
      color: #409eff;
      width: 160px;
      height: 28px;
      line-height: 28px;
      padding-right: 0px;
      padding-left: 0px;
    }
    .moenyInputS {
      .el-input__inner {
        color: #409eff;
        width: 100px !important;
        height: 28px;
        line-height: 28px;
        padding-right: 0px;
        padding-left: 0px;
      }
    }
    .timeStyle {
      .el-input__inner {
      color: #409eff;
      width: 160px;
      height: 28px;
      line-height: 28px;
      padding-right: 0px;
      padding-left: 25px;
    }
    }
    .el-form--inline .el-form-item {
      margin-right: 20px
    }
    .dialog-footer {
      // position: absolute;
      // bottom: 0px;
      text-align: right;
      margin-bottom: 5px;
    }
 }
</style>
